/*
  芝麻信用仪表盘demo2
  Autho:devstone
  Email:kevinlq0912@163.com
  QQ:2313828706
  Time:2018年2月3日16:08:06
*/
import QtQuick 2.0
import "../util/MathUtil.js" as MathUtil

Item
{
    id: zhimaRoot
    width: parent.width
    height: parent.height

    property var m_radius: Math.min(parent.width,parent.height)*0.36
    property var m_scalRadius: m_radius*0.024
    //计算每一格代表多少角度
    property var m_perAngle: (360 - 75*2)/21;//9.5
    property var m_curScore: 723;
    //评估时间
    property var m_evatTme: "2018-02-04"


    function update(value)
    {
        m_curScore = value;
        canvas.requestPaint();
    }

    //背景颜色
    Rectangle
    {
        id: background
        anchors.fill: canvas
        color: "#49E2C8"
    }

    Canvas
    {
        id: canvas
        width: parent.width
        height: parent.height

        onPaint:
        {
            var ctx = getContext("2d");
            var width = canvas.width
            var height = canvas.height
            ctx.clearRect(0,0,width,height);

            ctx.save();
            //将原点移到中心点,方便绘制
            ctx.translate(width/2,height/2);

            drawPanel(ctx);

            ctx.restore();
        }

        function drawPanel(ctx)
        {
            //绘制坐标轴,测试用
            //drawCoordinate(ctx);
            //绘制刻度
            drawScale(ctx);

            //绘制数字
            drawNumber(ctx);
        }

        //绘制刻度
        function drawScale(ctx)
        {
            ctx.save();
            var stAngle = 165;
            /*
              当前分数对应第几格
            */
            var num = parseInt((m_curScore - 400)/(500/22));
            for ( var i = 0; i < 22; i++)
            {
                var point = MathUtil.getCircleCoordinate(m_radius,0,0,stAngle);
                ctx.fillStyle = 'rgba(18,201,196,0.5)';
                if ( i <= num )
                {
                    ctx.fillStyle = 'rgba(255,255,255,0.8)';
                }

                drawRain(ctx,point[0],point[1],stAngle);
                stAngle += m_perAngle;
            }
            ctx.restore();
        }

        //绘制数字
        function drawNumber(ctx)
        {
            ctx.save();
            ctx.beginPath();
            //绘制信用分
            ctx.fillStyle = 'rgba(244,244,250,1.0)';
            ctx.font = m_radius*0.54+"px Arial";
            ctx.textAlign = "center";
            ctx.textBaseLine = "top";
            var txtY = m_radius*0.10;
            ctx.fillText(m_curScore,0,-txtY);

            //绘制信用说明
            ctx.font = m_radius*0.16+"px Arial";
            txtY = m_radius*0.22;
            if ( m_curScore < 500 )
            {
                ctx.fillText("信用较差",0,txtY);
            }else if ( m_curScore < 600 && m_curScore >= 500)
            {
                ctx.fillText("信用中等",0,txtY);
            }else if ( m_curScore < 700 && m_curScore >= 600)
            {
                ctx.fillText("信用良好",0,txtY);
            }else if ( m_curScore < 800 &&m_curScore >= 700)
            {
                ctx.fillText("信用优秀",0,txtY);
            }else if ( m_curScore <= 900 && m_curScore >=800)
            {
                ctx.fillText("信用极好",0,txtY);
            }

            //绘制评估时间
            ctx.font = m_radius*0.12+"px Arial";
            txtY = m_radius*0.42;
            ctx.fillStyle = 'rgba(98,255,239,0.8)';
            var evaText = "评估时间: "+m_evatTme;
            ctx.fillText(evaText,0,txtY);

            ctx.restore();
        }

        function drawCircle(ctx,x,y,angle)
        {
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.arc(0,0,6,0,Math.PI*2,false);
            ctx.stroke();
            ctx.restore();
        }


        //绘制雨滴形状
        function drawRain(ctx,x,y,angle)
        {
            var curveness = 0.38;
            var dis = m_scalRadius*4.8;
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(MathUtil.getRadian(90+angle));
            ctx.arc(0,0,m_scalRadius,MathUtil.getRadian(210),MathUtil.getRadian(330));

            //绘制二次贝塞尔曲线
            var stPoint = MathUtil.getCircleCoordinate(m_scalRadius,0,0,330);
            var stPoint2 = MathUtil.getCircleCoordinate(m_scalRadius,0,0,210);
            //右边
            drawCurvePath(ctx,stPoint,[0,dis],curveness);
            //左边
            drawCurvePath(ctx,[0,dis],stPoint2,curveness);
            ctx.fill();
            ctx.restore();
        }

        function drawCurvePath( ctx, start, end, curveness )
        {
            // 计算中间控制点
            var cp = [
                        ( start[ 0 ] + end[ 0 ] ) / 2 - ( start[ 1 ] - end[ 1 ] ) * curveness,
                        ( start[ 1 ] + end[ 1 ] ) / 2 - ( end[ 0 ] - start[ 0 ] ) * curveness
                    ];
            //                                    ctx.moveTo( start[ 0 ], start[ 1 ] );
            ctx.quadraticCurveTo(
                        cp[ 0 ], cp[ 1 ],
                        end[ 0 ], end[ 1 ]
                        );
        }

        function drawCoordinate(ctx)
        {
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(m_radius,0);
            ctx.lineTo(-m_radius,0);
            ctx.moveTo(0,-m_radius);
            ctx.lineTo(0,m_radius);
            ctx.stroke();
            ctx.restore();
        }

    }
}
